<!DOCTYPE html>
<html>
<head>
    <style>
        .draggable {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 100px;
            cursor: move;
            margin: 10px;
        }
        .dropzone {
            width: 300px;
            height: 300px;
            border: 2px dashed #ccc;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="draggable" draggable="true" id="drag1">拖拽我</div>
    
    <div class="dropzone" id="dropzone"></div>

    <script>
        const draggable = document.getElementById('drag1');
        const dropzone = document.getElementById('dropzone');

        draggable.addEventListener('dragstart', function(e) {
            e.dataTransfer.setData('text/plain', e.target.id);
        });

        dropzone.addEventListener('dragover', function(e) {
            e.preventDefault();
        });

        dropzone.addEventListener('drop', function(e) {
            e.preventDefault();
            const id = e.dataTransfer.getData('text/plain');
            const draggableElement = document.getElementById(id);
            e.target.appendChild(draggableElement);
        });
    </script>
</body>
</html>